import useDimensions from 'hooks/useDimensions';
import {StyleSheet, TouchableOpacity, View, Text, Image} from 'react-native';
import Swiper from 'react-native-swiper';
type CardProps = {
  index: number;
  bg: number;
  name: string;
  value: string;
  onClick?: () => void;
};
const CardItem = (props: CardProps) => {
  const hp = useDimensions();
  const styles = StyleSheet.create({
    card: {
      width: 320 * hp,
      height: 112 * hp,
      backgroundColor: '#FFFFFF',
      borderRadius: 16,
      flexDirection: 'row',
      alignItems: 'center',
    },
    bg: {
      width: 80 * hp,
      marginHorizontal: 16 * hp,
      height: 80 * hp,
    },
  });
  return (
    <TouchableOpacity
      onPress={props.onClick}
      style={{
        ...styles.card,
        marginRight: (props.index + 1) % 3 !== 0 ? 40 * hp : undefined,
        marginTop: props.index >= 3 ? 40 * hp : undefined,
      }}>
      <Image style={styles.bg} source={props.bg} />
      <View>
        <Text
          style={{
            fontSize: 18 * hp,
            fontWeight: '500',
            color: ' rgba(0,0,0,0.8)',
          }}>
          {props.name}
        </Text>
        <Text
          style={{
            fontSize: 18 * hp,
            color: ' rgba(0,0,0,0.4)',
            width: 178 * hp,
            marginTop: 10 * hp,
          }}>
          {props.value}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

const List = [
  {
    name: '重点单位',
    value: 'Key Unit',
    bg: require('assets/assist/pic_assist_zddw.png'),
  },
  {
    name: '危化品',
    value: 'Hazardous Chemicals',
    bg: require('assets/assist/pic_assist_whp.png'),
  },
  {
    name: '消防水源',
    value: 'Fire Water Source',
    bg: require('assets/assist/pic_assist_xfsy.png'),
  },
  {
    name: '动态战力',
    value: 'Dynamic Combat Power',
    bg: require('assets/assist/pic_assist_dtzl.png'),
    path: 'CombatPower',
  },
  {
    name: '案例库',
    value: 'Case Library',
    bg: require('assets/assist/pic_assist_alk.png'),
  },
  {
    name: '值班信息',
    value: 'Duty Information',
    bg: require('assets/assist/pic_assist_zbxx.png'),
  },
];
export default ({navigation}: RootStackScreenProps) => {
  const onClick = (path: string) => {
    navigation.push(path, {});
  };
  const hp = useDimensions();
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexWrap: 'wrap',
      flexDirection: 'row',
      marginHorizontal: 120 * hp,
      marginTop: 370 * hp,
      justifyContent:'center'
    },
  });
  return (
    <Swiper
      containerStyle={{
        alignItems: 'center',
        flex:1
      }}
      activeDot={
        <View
          style={{
            width: 24 * hp,
            height: 10 * hp,
            backgroundColor: '#0A59F7',
            borderRadius: 30 * hp,
          }}></View>
      }>
      <View style={styles.container}>
        {List.map((item, index) => {
          return (
            <CardItem
              key={item.name}
              {...item}
              index={index}
              onClick={() => onClick(item.path ?? '')}
            />
          );
        })}
      </View>
      <View style={{...styles.container,justifyContent:'flex-start'}}>
        <CardItem
          {...{
            name: '信息采集',
            value: 'Information Collection',
            bg: require('assets/assist/pic_assist_zddw.png'),
          }}
          index={0}

          // onClick={() => onClick(item.path ?? '')}
        />
      </View>
    </Swiper>
  );
};
